<template>
  <div class="x-handle" @mousedown="mouseDown" :style="position"></div>
</template>
<script>
export default {
  name: "XHandle",
  props: {
    // 边缘位置
    position: {
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      lastX: "",
    };
  },

  created() {
    document.addEventListener("mouseup", this.mouseUp);
  },

  destroyed() {
    document.removeEventListener("mouseup", this.mouseUp);
  },

  methods: {
    mouseDown(event) {
      document.addEventListener("mousemove", this.mouseMove);
      this.lastX = event.screenX;
      let ele = document.getElementsByClassName("iframeDiv")[0];
      ele ? (ele.style.display = "block") : "";
    },
    mouseMove(event) {
      this.$emit("widthChange", this.lastX - event.screenX);
      this.lastX = event.screenX;
    },
    mouseUp() {
      this.lastX = "";
      document.removeEventListener("mousemove", this.mouseMove);
      let ele = document.getElementsByClassName("iframeDiv")[0];
      ele ? (ele.style.display = "none") : "";
    },
  },
};
</script>
<style lang="scss" scoped>
.x-handle {
  height: 100%;
  width: 4px;
  overflow: hidden;
  background: none;
  cursor: col-resize;
  z-index: 998;
  position: absolute;
}
</style>
